<template>
  <div class="field-item">
    <div class="item">
      <!-- <p class="left-icon">
        <img src="../img/我的授权@2x.png" alt />
      </p>-->
      <p class="label">可用次数：</p>
      <p class="content">
        <span>123564</span>
      </p>

      <p class="right-icon">
        <icon name="arrow-down" />
      </p>
    </div>
  </div>
</template>

<script>
import { Icon} from "vant";

export default {
  components:{
    Icon
  },
  props:{
    label: {
      type: String,
      default: '有效期限：'
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid var(--line-between-color);
  transition: 0.2s;
}

.item:hover {
  background-color: var(--line-between-color);
}

.item > .left-icon {
  display: flex;
  align-items: center;
  margin-right: 6px;
}

.item > .right-icon{
  display: flex;
  align-items: center;
}

.item > .label {
  /* padding-left: 6px; */
}

.item img {
  width: 25px;
  height: 25px;
}

.item input:hover {
  background-color: var(--line-between-color);
}

.item > .content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 6px;
}

.item input {
  border: 0;
}
</style>